<template>
  <div class="cp-body-content">
    <cp-body-lottery-num :lotteryNums="lotteryNums" :classType="classType">
    </cp-body-lottery-num>
    <div :class="'cp-body-content-desc txt-'+classType ">{{bodyContent.desc}}</div>

    <div class="cp-body-content-nums" v-if="bodyType==1">
      <div class="cp-body-content-left" v-for="le in bodyContent.body.left">
        <em>{{le}}</em>
        <div class="ball-num-list">
          <div class="ball-num" v-for="ri in bodyContent.body.right" @click="selectedBall(ri,$event.currentTarget)">{{ri}}</div>
        </div>
      </div>
    </div>

    <div class="cp-body-content-textarea" v-if="bodyType==2">
        <textarea :placeholder="bodyContent.body.placeholder">
        </textarea>
    </div>

    <div class="cp-body-content-5" v-if="bodyType==5">
      <div class="num-list">
        <div class="num" v-for="ball in bodyContent.body.right" @click="selectedK3(ball,$event.currentTarget)">
          <div class="num-title">
            {{ball.title}}
          </div>
          <div class="num-pl">
            {{ball.pl}}
          </div>
        </div>
      </div>
    </div>
    <div class="cp-body-content-6" v-if="bodyType==6">
      <div class="tx" v-for="tx in bodyContent.body.right"  @click="selectedK3(tx,$event.currentTarget)">
        {{tx}}
      </div>
    </div>
    <div class="cp-body-content-7" v-if="bodyType==7">
      <div class="tx" v-for="tx in bodyContent.body.right"  @click="selectedK3(tx,$event.currentTarget)">
        {{tx}}
      </div>
    </div>

  </div>
</template>

<script>
  import cpBodyLotteryNum from "./cp-body-lottery-num.vue"

  export default {
    name: 'cp-body-content',
    components: {
      cpBodyLotteryNum,
    },
    data() {
      return {
        multipleVisible: false,
        zhushu: 0,
        totalMoney: 0,
        backGround: "",
        tipsBgClass: "",
      }
    },
    props: {
      bodyContent: {
        type: Object,
        default: {
          bodyType: 1
        }
      },
      lotteryNums: {
        type: [Array, Object]
      },
      classType: {
        type: Number,
      }
    },
    methods: {
      selectedBall(data, target) {
        $(target).toggleClass("ball-selected");
        this.totalMoney = this.totalMoney * this.zhushu;
        this.countedBall();
      },
      countedBall() {
        let zhushu = 1;
        let balls = '';
        $.each($(".ball-num-list"), function (i, v) {
          let l = $(this).find(".ball-selected");
          if (l.length > 0) {
            $.each(l, function (j, ob) {
              balls = balls + $(this).text() + ' ';
            });
            if (i != $(".ball-num-list").length - 1) {
              balls += ","
            }
          }
          zhushu = zhushu * l.length;
        });
        this.zhushu = zhushu;
        this.multipleVisible = zhushu > 0;
        this.backGround = zhushu > 0 ? "red" : "";

        this.$emit("choose-num", {
          balls: balls,
          zhushu:zhushu,
          hasAll: zhushu > 0
        });
      },
      watchTotalMoney(value) {
        this.totalMoney = value * this.zhushu;
      },
      listenClickBaskets(zIndex) {
        this.$emit("click-content-basket", zIndex);
      },
      listenCloseBasket(zIndex) {
        this.$emit("close-content-basket", zIndex);
      },
      selectedK3(value,obj){
        $(obj).toggleClass("k3-selected");
      }
    },
    computed: {
      bodyType: {
        get() {
          return this.bodyContent.body.bodyType;
        },
        set() {
          return this.bodyContent.body.bodyType;
        }
      }
    }
  }
</script>

<style scoped>
  .cp-body-content-6, .cp-body-content-7 {
    text-align: center;
  }
  .k3-selected{
    border-color: #f7ce2f!important;
  }
  .tx {
    display: inline-block;
    text-align: center;
    border: 1px solid hsla(0, 0%, 100%, .3);
    color: #fff;
    font-size: 2em;
  }

  .cp-body-content-6 .tx {
    padding: .2em 1em;

  }

  .cp-body-content-7 .tx {
    padding: .2em .2em;
    margin: .15em;
  }

  .txt-2 {
    color: #caebda !important;
    text-align: center;
    font-size: 1.1em !important;
    padding: .7em !important;
    margin-left: 0 !important;
  }

  .num-list {
    text-align: center;
  }

  .num {
    border: 1px solid hsla(0, 0%, 100%, .3);
    display: inline-block;
    width: 5.8em;
    height: 4em;
    margin: .4em;
    text-align: center;
    color: #fff;
  }

  .num .num-pl {
    color: #caebda;
  }

  .num .num-title {
    font-size: 2em;
    height: 1.2em;
  }

  .ball-selected {
    background: #dc3b40 !important;
    color: #fff !important;
    border: 1px solid #dc3b40 !important;
  }

  .cp-body-content-left {
    /*display: inline-block;*/
    padding: 1.0em;
  }

  .ball-num-list {
    width: 80%;
    display: inline-block;
    margin-left: 5em;
  }

  .cp-body-content-left .ball-num {
    display: inline-block;
    width: 2.0em;
    height: 2.0em;
    line-height: 2.0em;
    border-radius: 50%;
    font-size: 1.45em;
    color: #dc3b40;
    background: #faf9f6;
    border: 1px solid #bfbfbf;
    text-align: center;
    margin: 0.4em;
  }

  .cp-body-content-left em {
    font-size: 1.35em;
    width: 3.2em;
    /*display: block;*/
    line-height: 1.3em;
    color: #bbb39c;
    background: #eeebda;
    border: 1px solid #e3decf;
    border-radius: .3em;
    position: absolute;
    z-index: 2;
    margin-top: .4em;
    padding: .2em .5em;
    vertical-align: top;
  }

  .cp-body-content {
    margin-top: 1.1rem;
    padding-bottom: 2.0rem;
  }

  .cp-body-content-desc {
    margin-top: 2.3rem;
    color: #333;
    margin-left: 1em;
    font-size: 1.2em;
    padding: 0.2em;
  }

  .cp-body-content-textarea {
    margin: 1em;
  }

  .cp-body-content-textarea textarea {
    width: 100%;
    height: 4rem;
    padding: 1em;
    border: none;
  }
</style>
